<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Modal } from '@arco-design/web-vue'
const $route = useRoute()
const $router = useRouter()
const title = ref('')
const data = ref([
  {
    renyuan: '张三',
    shangchuanStatus: 1, //已上传2未上传
    yuyueTime: '2024-01-07',
    son: [
      {
        shijiTime: '2024-01-07 16:42:12',
        mianshiren: '张三三',
        defen: 50,
      },
      {
        shijiTime: '2024-01-08 16:42:12',
        mianshiren: '张三三',
        defen: 50,
      },
    ],
    hejidefen: 100,
    status: 1, // 1录取2待一轮面试3待二轮面试4未录取5已完成面试
  },
])

const addSon = (rowIndex) => {
  data.value[rowIndex].son.push({
    wenti: '问题2',
    yaodian: '要点1',
    putong: 1,
    lianghao: 3,
    youxiu: 5,
  })
}

const deleteSon = (rowIndex, index) => {
  data.value[rowIndex].son.splice(index, 1)
}

const addItem = () => {
  data.value.push({
    bankuai: '',
    son: [
      {
        wenti: '',
        yaodian: '',
        putong: 1,
        lianghao: 3,
        youxiu: 5,
      },
    ],
  })
}

const deleteItem = (rowIndex) => {
  data.value.splice(rowIndex, 1)
}

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}

const form = reactive({
  bumen: '',
  gangwei: '',
  renshu: '',
  yaoqiu: '',
  muban: '',
  lunshu: '',
})
const handleSubmit = (data) => {
  console.log(data)
}

const goBack = () => {
  $router.go(-1)
}

const data1 = ref([
  {
    time: '2024-02-12 16:43:00',
    do: '添加初始时间——2024-02-12 16:43:00',
  },
  {
    time: '2024-02-12 16:43:00',
    do: '添加初始时间——2024-02-12 16:43:00',
  },
])
</script>

<template>
  <div class="page">
    <div class="header">招聘模板查看</div>

    <div class="record_body">
      <div class="form_body">
        <div class="form_body_title tac">第一轮评审表</div>

        <div>
          <div class="flex">
            <div class="table_name">岗位画像配置</div>
            <div class="table_body">
              <a-table
                :data="data"
                :pagination="false"
                :bordered="{ headerCell: true, cell: true }"
              >
                <template #columns>
                  <a-table-column
                    title="板块"
                    align="center"
                    data-index="bankuai"
                  >
                    <template #cell="{ record, rowIndex }">
                      <div class="flex at_c">
                        <!-- <a-button type="primary"
                            status="danger"
                            size="mini"
                            @click="deleteItem(rowIndex)">删除板块</a-button> -->

                        <a-input v-model="record.bankuai" />

                        <!-- <a-button type="primary"
                            size="mini"
                            @click="addSon(rowIndex)">增加问题</a-button> -->
                      </div>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="问题"
                    align="center"
                    data-index="wenti"
                  >
                    <template #cell="{ record }">
                      <div
                        class="diytd"
                        v-for="(item, index) in record.son"
                        :key="index"
                      >
                        <a-textarea v-model="item.wenti" />
                      </div>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="考核要点"
                    align="center"
                    data-index="yaodian"
                  >
                    <template #cell="{ record }">
                      <div
                        class="diytd"
                        v-for="(item, index) in record.son"
                        :key="index"
                      >
                        <a-textarea v-model="item.yaodian" />
                      </div>
                    </template>
                  </a-table-column>
                  <a-table-column title="分值">
                    <a-table-column
                      title="普通"
                      align="center"
                      :width="70"
                      data-index="putong"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c">{{ item.putong }}</div>
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="良好"
                      align="center"
                      :width="70"
                      data-index="lianghao"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c">{{ item.lianghao }}</div>
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="优秀"
                      align="center"
                      :width="70"
                      data-index="youxiu"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c">{{ item.youxiu }}</div>
                        </div>
                      </template>
                    </a-table-column>
                  </a-table-column>

                  <!-- <a-table-column title="操作"
                            align="right"
                            :width="100">
              <template #cell="{ record,rowIndex }">
                <div class="diytd"
                     v-for="(item,index) in record.son"
                     :key="index">
                  <div class="h32">
                    <a-button type="primary"
                              status="danger"
                              size="mini"
                              @click="deleteSon(rowIndex,index)">删除问题</a-button>
                  </div>
                </div>
              </template>
            </a-table-column> -->
                </template>
              </a-table>
            </div>
          </div>
          <div class="table_bottom">
            <div class="name">合计</div>
            <div style="flex: 1">板块：1</div>
            <div style="flex: 1">问题：2</div>
            <div style="flex: 1">总分：3</div>
          </div>
        </div>

        <div class="flex jc_e mt30">
          <a-space>
            <a-button @click="goBack" type="primary" status="danger"
              >返回</a-button
            >
            <a-button type="primary">确认发布</a-button>
          </a-space>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 95%;
  border-bottom: 0;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

:deep(.arco-table-cell):has(.diytd) {
  padding: 0;
}
:deep(.arco-table-cell):has(.diytd) .diytd {
  padding: 0.6rem 1.06667rem;
  border-bottom: 1px solid #ddd;
}
:deep(.arco-table-cell):has(.diytd) .diytd:last-child {
  border: none;
}

.diytd {
  height: 80px;
  display: flex;
  align-items: center;
}

.h32 {
  height: 32px;
  display: flex;
  align-items: center;
}

.record_body {
  box-sizing: border-box;
  padding: 20px 24px;
}

.form_body {
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
  margin-bottom: 20px;
}

.form_body_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.table_name {
  width: 100px;
  box-sizing: border-box;
  padding: 0 40px;
  font-size: 14px;
  background-color: #f2f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e6eb;
}

.table_body {
  width: 100%;
}

.table_bottom {
  display: flex;
  align-items: center;
  background-color: #f2f3f5;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e6eb;
}

.table_bottom > div {
  box-sizing: border-box;
  padding: 0.6rem 1.06667rem;
  text-align: center;
}

.table_bottom > div:not(:last-child) {
  border-right: 1px solid #e5e6eb;
}

.table_bottom .name {
  width: 100px;
}

.page_bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
}

.circle_cell {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #819a59;
  box-sizing: border-box;
}

.circle_cell_green {
  background-color: #95f204;
}
</style>
